<template>
  <!-- 通知 -->
  <div
    class="koi-notice m-t-6px bg-[--el-color-primary-light-2] rounded-8px border-2px border-solid border-[--el-color-primary] w-40px h-40px flex flex-justify-center flex-items-center"
    @click="handleOpenDialog"
  >
    <el-badge :value="noticeList.length" type="primary" :offset="[7, -5]" badge-class="border-#FFF" class="flex flex-items-center" v-if="noticeList.length > 0">
      <el-icon :size="20"><BellFilled class="icon-shake" /></el-icon>
    </el-badge>
    <el-icon :size="20" v-if="noticeList.length == 0"><BellFilled /></el-icon>
  </div>

  <!-- 消息通知 -->
  <KoiDialog ref="koiDialogRef" title="消息通知" top="6vh" :width="466" :height="580" :footerHidden="true">
    <template #content>
      <!-- 搜索结果 -->
      <div class="flex flex-justify-center">
        <div
          class="overflow-y-auto w-100% h-555px rounded-10px border-1px border-solid border-[--el-color-primary-light-5] bg-#FFF dark:bg-#1A1A1A p-y-8px p-x-6px"
        >
          <div class="flex flex-items-center flex-justify-between m-b-10px">
            <div
              class="m-t-2px flex flex-items-center flex-justify-center text-16px text-[--el-color-primary] max-w-150px rounded-6px border-2px border-dashed border-[--el-color-primary-light-2] hover:border-[--el-color-primary] hover:bg-[--el-color-primary-light-7] bg-[--el-color-primary-light-8] backdrop-blur-3xl p-l-14px p-r-18px p-y-2px transition-all duration-600 transition-ease-in-out"
            >
              <el-icon :size="18"><BellFilled /></el-icon>
              <div class="font-bold tracking-2px line-clamp-1 m-l-2px">消息通知</div>
            </div>
            <el-tag size="small">全部已读</el-tag>
          </div>

          <div
            class="border-1px border-solid border-[--el-border-color] hover:border-[--el-color-primary] rounded-10px p-r-6px p-y-5px flex m-t-8px transition-all duration-600 transition-ease-in-out"
            v-if="noticeList.length > 0"
            v-for="item in noticeList"
            :key="item.noticeId"
          >
            <div class="flex flex-col flex-justify-center m-l-6px m-r-8px">
              <div
                class="text-14px m-b-6px line-clamp-2 text-#333 dark:text-#D8D8D8 gradient-title h-40px"
              >
                {{ item.noticeTitle }}
              </div>
              <div class="text-12px text-#7E7E7E dark:text-#D8D8D8 m-b-2px">{{ item.createTime }}</div>
            </div>

            <div>
              <el-tag size="small" type="success">已读</el-tag>
            </div>
          </div>

          <div class="flex flex-justify-center" v-if="noticeList.length == 0">
            <el-empty :image="errorUrl" :image-size="300" description="主人，没有数据了哟👻"></el-empty>
          </div>
        </div>
      </div>
    </template>
  </KoiDialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { koiMsgError } from "@/utils/koi.ts";
import { list } from "@/api/blog/notice/index.ts";
import errorUrl from "@/assets/images/error/404.png";

const koiDialogRef = ref();
const noticeList = ref<any>([]);

/** 数据查询 */
const handleList = async () => {
  try {
    // 重置数据
    noticeList.value = [];
    const res: any = await list();
    noticeList.value = res.data;
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
};

onMounted(() => {
  handleList();
});

/** 打开对话框 */
const handleOpenDialog = () => {
  koiDialogRef.value.koiOpen();
};
</script>

<style lang="scss" scoped>
.koi-notice:hover .icon-shake {
  animation: koi-shake 0.6s ease-in-out forwards;
}

@keyframes koi-shake {
  0%, 100% {
    transform: rotate(0);
    -webkit-transform: rotate(0); /* Safari 和 Chrome */
    transform-origin: center;
    -webkit-transform-origin: center; /* Safari 和 Chrome */
  }
  25% {
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg); /* Safari 和 Chrome */
  }
  50% {
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg); /* Safari 和 Chrome */
  }
  75% {
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg); /* Safari 和 Chrome */
  }
}
</style>
